import styled from 'styled-components'
import React, {useEffect, useRef, useState} from 'react'
import Swiper from 'swiper'
import {getImageUrl} from '@/utils/utils.js'
//轮播图
const MSwiperBox = styled.div`
    width: 800px;
    height: 300px;
    cursor: pointer;

    .swiper-container {
        width: 100%;
        height: 100%;
    }

    .swiper-container-horizontal > .swiper-pagination-bullets {
        bottom: 21px;
        right: 20px;
        width: fit-content;
        left: initial;
    }

    .swiper-pagination-bullet {
        width: 17px !important;
        height: 6px !important;
        flex-shrink: 0 !important;
        border-radius: 20px !important;
        background: #f4f4f4 !important;
        margin-right: 5px !important;
        cursor: pointer !important;
        opacity: 1 !important;
    }

    .swiper-pagination-bullet-active {
        width: 38px !important;
        background: #b1b1b1 !important;
        flex-shrink: 0 !important;
        border-radius: 20px !important;
        opacity: 1 !important;
        margin-right: 5px !important;
        cursor: pointer !important;
    }

    .play-btn {
        position: absolute;
        left: 20px;
        bottom: 20px;
        width: 146px;
        height: 38px;
        border-radius: 50px;
        background: #00000066;
        color: #ffffff;
        font-size: 22px;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            width: 24px;
            height: 24px;
            margin-right: 4px;
        }
    }
`

export function MSwiper({list = []}) {
  let swiper = useRef()
  const loop = list.length > 1;
  useEffect(() => {
    swiper.current = new Swiper(".swiper-container-1", {
      loop, // 无缝
      autoplay: {
        delay: 2000, // 时间间隔
        disableOnInteraction: false
      },
      lazy: {
        loadPrevNext: true,
        preloaderClass: "my-lazy-preloader"
      },
      on: {
        click() {
          console.log(swiper.current.realIndex)
        }
      },
      paginationClickable: true,
      // slidesPerView: 1, // 一组几个
      // spaceBetween: 30, // 间隔
      // 如果需要前进后退按钮
      // navigation: {
      //   nextEl: '.swiper-button-next',
      //   prevEl: '.swiper-button-prev',
      // },
      // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
      observer: true,
      observeParents: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true // 分页器可以点击
      }
    });
    return () => {
      // 清理Swiper实例
      if (swiper.current) {
        swiper.current?.destroy(true, true);
      }
    };
  }, [list])
  return (<>
    <MSwiperBox onMouseEnter={() => {
      swiper.current?.autoplay.stop()
    }} onMouseLeave={() => {
      swiper.current?.autoplay.start()
    }}>
      <div className={'swiper-container swiper-container-1'}>
        <div className="swiper-wrapper">
          {list.map((item, index) => {
            return (<div className="swiper-slide" key={index}>
              <img src={item.image_url} alt="" style={{width: '100%', height: '100%'}}/>
              {item.banner_type === 14 && <div className={'play-btn'}>
                <img src={getImageUrl('swiper_play.png')} alt="立即播放"/>
                <div>立即播放</div>
              </div>}
            </div>)
          })}
        </div>
        <div className="swiper-pagination"></div>
      </div>
    </MSwiperBox>

  </>)
}

// 大家都在看
const EverybodyContainer = styled.div`
    width: 380px;
    height: 300px;
    background: linear-gradient(180deg, #F8C5C9 -8.83%, #FFF 32.5%);
    margin-left: 20px;
    box-sizing: border-box;
    padding: 17px 17px 18px 17px;

    .title-box {
        display: flex;
        align-items: center;
        position: relative;

        .icon {
            width: 25px;
            height: 25px;
            margin-left: 6px;
        }

        .title {
            color: #ec0d1e;
            font-size: 20px;
            font-weight: 700;
            margin-left: 8px;
            position: relative;
            z-index: 1;
        }

        .circle {
            width: 32px;
            height: 32px;
            transform: rotate(29.929deg);
            flex-shrink: 0;
            border-radius: 32px;
            background: linear-gradient(0deg, #F8E4E6 32.43%, #FFB0B6 100%);
            //margin-left: -14px;
            z-index: 0;
            left: 122px;
            position: absolute;
        }
    }

    .list-box {
        margin-top: 16px;

        .item {
            display: flex;
            margin-bottom: 16px;
            align-items: center;


            &:last-child {
                margin-bottom: 0;
            }

            .rank {
                position: relative;
                z-index: 1;

                .hot-rank {
                    color: #FF352D;
                    position: relative;
                    z-index: 1;
                    font-size: 14px
                }

                .not-hot {
                    color: #FF9E58;
                    position: relative;
                    z-index: 1;
                    font-size: 14px
                }

                .mask-1 {
                    display: block;
                    content: '';
                    position: absolute;
                    width: 37px;
                    height: 7px;
                    border-radius: 5px;
                    background: linear-gradient(90deg, #FFF 28.88%, #FFB6B6 99.71%);
                    z-index: 0;
                    top: 10px;
                    left: -2px;
                }

                .mask-2 {
                    display: block;
                    content: '';
                    position: absolute;
                    width: 37px;
                    height: 7px;
                    border-radius: 5px;
                    background: linear-gradient(90deg, #FFF 28.88%, #FFDBBA 99.71%);
                    z-index: 0;
                    top: 10px;
                    left: -2px;
                }

            }

            .content {
                display: flex;
                margin-left: 5px;
                align-items: center;
                line-height: 18px;
                color: #1c1c1c;

                .type {

                    font-size: 14px;
                    font-weight: 700;
                }

                .text {
                    max-width: 221px;
                    //color: #1c1c1c;
                    font-size: 14px;
                    font-weight: 400;
                }
            }

            .hot {
                width: 16px;
                height: 16px;
                border-radius: 2px;
                background: linear-gradient(180deg, #FF8C8C 24.19%, #FF0404 100%);
                display: flex;
                align-items: center;
                justify-content: center;
                color: #ffffff;
                font-size: 12px;
                font-weight: 400;
                margin-left: 4px;
            }

            .new {
                width: 16px;
                height: 16px;
                border-radius: 2px;
                background: linear-gradient(180deg, #FFBF42 0%, #FF7C04 100%);
                display: flex;
                align-items: center;
                justify-content: center;
                color: #ffffff;
                font-size: 12px;
                font-weight: 400;
                margin-left: 4px;
            }
        }
    }

`

export function EverybodyIsWatching({list = []}) {
  return (<>
    <EverybodyContainer>
      <div className={'title-box'}>
        <img src={getImageUrl('fire.png')} alt={""} className="icon"/>
        <div className="title">大家都在看</div>
        <div className="circle"></div>
      </div>
      <div className="list-box">
        {list.map((item, index) => {
          return (<div className="item" key={index}>
            <div className="rank">
              <span className={`icon iconfont icon-a-NO ${index > 2 ? 'not-hot' : 'hot-rank'}`}></span>
              <span className={`icon iconfont icon-a-${index + 1} ${index > 2 ? 'not-hot' : 'hot-rank'}`}
                    style={{fontSize: '16px'}}></span>
              <div className={index > 2 ? 'mask-2' : 'mask-1'}></div>
            </div>
            <div className="content  hover-text">
              <div className="type ">{item.resource_type === 1 ? '推荐活动 |' : '推荐专栏 |'}</div>
              <div className="text u-line-1 ">&nbsp;{item.name}</div>
            </div>
            <div className={item.tag_type === 1 ? 'hot' : 'new'}>{item.tag_type === 1 ? '热' : '新'}</div>
          </div>)
        })}
      </div>

    </EverybodyContainer>
  </>)
}

// 通用标签
const MLabelContainer = styled.div`
    display: flex;
    justify-content: space-between;

    .left {
        display: flex;
        align-items: center;

        .icon {
            width: 30px;
            height: 30px;
        }

        .text {
            color: #006647;
            font-size: 22px;
            font-weight: 700;
            margin-left: 10px;
        }
    }

    .right {
        cursor: pointer;
        display: flex;
        align-items: center;

        .icon {
            width: 14px;
            height: 14px;
            margin-left: 4px;
        }

        .text {
            color: #006647;
            font-size: 16px;
            font-weight: 500;
            letter-spacing: 0.48px;
        }
    }
`
const MLabelContainerSecond = styled.div`
    display: flex;
    align-items: center;

    .icon {
        width: 4px;
        height: 18px;
        background: #006647;
        margin-right: 10px
    }

    .title {
        color: #1c1c1c;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 0.6px;
    }

    //justify-content: space-between;

`

export function MLabel({
                         letIcon = 'specialColumn/rank.png',
                         rightIcon = 'specialColumn/right.png',
                         leftText,
                         rightText,
                         type = 1
                       }) {
  if (type === 1) {
    return (<>
      <MLabelContainer>
        <div className={'left'}>
          <img src={getImageUrl(letIcon)} alt="" className="icon"/>
          <div className="text">{leftText}</div>
        </div>
        {rightText && <div className={'right'}>
          <div className="text">{rightText}</div>
          <img src={getImageUrl(rightIcon)} alt="" className="icon"/>
        </div>}
      </MLabelContainer>
    </>)
  } else {
    return (<>
      <MLabelContainerSecond>
        <div className={'icon'}></div>
        <div className={'title'}>{leftText}</div>
      </MLabelContainerSecond>
    </>)
  }

}

// 热门活动
const ActiveItemContainer = styled.div`
    width: 231px;
    height: fit-content;
    border-radius: 6px;
    background: #FFF;
    box-shadow: 0 0 6px 0 #00000026;
    position: relative;


    .cover {
        width: 231px;
        height: 154px;
        border-radius: 6px 6px 0 0;
        display: block;
    }

    .views {
        position: absolute;
        width: 100%;
        height: 40px;
        padding: 18px 0px 8px 8px;
        background: linear-gradient(360deg, #000 -20.93%, #66666600 85.59%);
        display: flex;
        align-items: center;
        color: #ffffff;
        font-size: 14px;
        font-weight: 400;
        line-height: 14px;
        top: 114px;
        left: 0;
        box-sizing: border-box;

        img {
            width: 16px;
            height: 12px;
            margin-right: 6px;
        }
    }

    .content {
        padding: 16px;
        width: 100%;
        box-sizing: border-box;

        .title-box {
            width: 100%;
            position: relative;
            height: 44px;

            .type {
                position: absolute;
                top: 0;
                left: 0;
                width: 64px;
                height: 22px;
                line-height: 22px;
                text-align: center;
                color: #ffffff;
                font-size: 14px;
                font-weight: 700;
                border-radius: 2px;
                background: #039e40;
            }

            .title {
                box-sizing: content-box;
                line-height: 22px;
                color: #1c1c1c;
                font-size: 16px;
                font-weight: 700;
                text-indent: 68px;
                width: fit-content;
            }
        }

        .type-box {
            display: flex;
            margin-top: 8px;
        }

        .time {
            color: #666666;
            font-size: 12px;
            font-weight: 400;
            line-height: 12px;
            margin-top: 8px;
        }

        .line {
            height: 1px;
            width: 100%;
            background: #D6D6D6;
            margin-top: 14px;
        }

        .press-box {
            margin-top: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .press-cover {
                width: 60px;
                height: 60px;
                border: 1px solid #D6D6D6;
                border-radius: 50%;
                box-sizing: border-box;
            }

            .press-name {
                color: #1c1c1c;
                font-size: 14px;
                font-weight: 700;
                line-height: 22px;
                width: fit-content;
                max-width: 129px;
            }
        }
    }
`
export const TypeBox = styled.div`
    width: fit-content;
    padding: 0 10px;
    height: 22px;
    border-radius: 4px;
    border: 1px solid ${props => props.color || '#666'};
    //display: flex;
    //align-items: center;
    color: ${props => props.color || '#666'};
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    box-sizing: border-box;
`

export function ActiveItem({detail}) {
  const colorMap = {
    1: '#f77629',
    2: '#006647',
    3: '#666'
  }
  return (<>
    <ActiveItemContainer className={'hover-box'}>
      <img src={detail?.cover_image} alt="" className={'cover'}/>
      <div className={'views'}>
        <img src={getImageUrl('eyes.png')} alt=""/>
        {detail?.views}
      </div>
      <div className={'content'}>
        <div className={'title-box'}>
          {detail?.reward_type_str && <div className={'type'}>{detail?.reward_type_str}</div>}
          <div className={'title u-line-2 hover-text'}
               style={{textIndent: detail?.reward_type_str ? '64px' : '0px'}}>{detail?.activity_name}</div>
        </div>
        <div className={'type-box'}>
          {detail?.status_str && <TypeBox color={colorMap[detail?.status]}>{detail?.status_str}</TypeBox>}
          {detail?.category_name && <TypeBox style={{marginLeft: '6px'}}>{detail?.category_name}</TypeBox>}
        </div>
        <div className={'time'}>{detail?.period}</div>
        <div className={'line'}></div>
        <div className={'press-box'}>
          <img src={detail?.press?.logo_url} alt="" className={'press-cover'}/>
          <div className={'press-name u-line-1'}>{detail?.press?.press_name}</div>
        </div>
      </div>
    </ActiveItemContainer>
  </>)
}

//热门文化名片
const CulturalCardsItemBox = styled.div`
    width: 361px;
    height: 223px;
    background: linear-gradient(143deg, rgba(${props => props.rgbcolor}, 0.7) 15.01%, ${props => props.color} 53.73%);
    position: relative;
    box-sizing: border-box;
    border-radius: 8px;

    .views {
        position: absolute;
        top: 15px;
        right: 4px;
        color: #ffffff;
        font-size: 14px;
        font-weight: 400;
        line-height: 14px;
        width: 72px;
        height: 14px;
        display: flex;
        align-items: center;
        justify-content: center;

        .see {
            width: 16px;
            height: 12px;
            margin-right: 6px;
        }
    }

    .mask {
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        box-sizing: border-box;
        z-index: 5;
    }

    .content {
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        box-sizing: border-box;
        z-index: 10;

        .press-box {
            margin-top: 27px;
            margin-left: 20px;
            display: flex;

            .cover {
                width: 80px;
                height: 80px;
                border-radius: 50%;
                display: block;
            }

            .info {
                margin-left: 20px;

                .title {
                    color: #1c1c1c;
                    font-size: 16px;
                    font-weight: 700;
                    line-height: 20px;
                    width: fit-content;
                    max-width: 158px;
                    margin-top: 4px;
                    position: relative;

                    &::after {
                        content: '';
                        width: 100%;
                        height: 4px;
                        position: absolute;
                        background: linear-gradient(270deg, #ffffff00 0%, ${props => props.color} 100%);
                        left: 0;
                        bottom: 0;
                        z-index: -1;
                    }
                }

                .slogan {
                    max-width: 210px;
                    width: fit-content;
                    color: #666666;
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 20px;
                    margin-top: 16px;
                }
            }
        }

        .statistics {
            width: 342px;
            height: 84px;
            background: #FFF;
            margin: 21px auto 0 auto;
            box-sizing: border-box;
            padding: 18px 20px;
            display: grid;
            grid-template-columns: repeat(3, auto);
            justify-content: space-between;
            gap: 20px 0;

            .statistics-item {
                display: flex;
                align-items: center;
                height: 16px;
                //justify-content: center;

                .icon {
                    font-size: 16px;
                    margin-right: 4px;
                    color: ${props => props.color};
                }

                .number {
                    color: #666666;
                    font-size: 12px;
                    font-weight: 400;
                }
            }
        }
    }

`

export function CulturalCardsItem({detail}) {
  return (<>
    <CulturalCardsItemBox color={detail?.theme_color} rgbcolor={detail?.theme_color_rgb} className={'item hover-box'}>
      <img src={getImageUrl('card_mask.png')} alt="" className={'mask'}/>
      <div className={'views'}>
        <img src={getImageUrl('eyes.png')} alt="" className={'see'}/>
        {detail?.views}
      </div>
      <div className={'content'}>
        <div className={'press-box'}>
          <img src={detail?.logo_url} alt="" className={'cover'}/>
          <div className={'info'}>
            <div className={'title u-line-1 hover-text'}>{detail?.press_name}</div>
            <div className={'slogan u-line-2'}>{detail?.slogan}</div>
          </div>
        </div>
        <div className={'statistics'}>
          <div className={'statistics-item'}>
            <div className="icon iconfont icon-activity"></div>
            <div className="number">活动：{detail?.activity_count}</div>
          </div>
          <div className={'statistics-item'}>
            <div className="icon iconfont icon-article"></div>
            <div className="number">文章：{detail?.article_count}</div>
          </div>
          <div className={'statistics-item'}>
            <div className="icon iconfont icon-person"></div>
            <div className="number">大咖：{detail?.influential_person_count}</div>
          </div>
          <div className={'statistics-item'}>
            <div className="icon iconfont icon-newspaper"></div>
            <div className="number">报刊：{detail?.publication_type_count}</div>
          </div>
          <div className={'statistics-item'}>
            <div className="icon iconfont icon-fans"></div>
            <div className="number">粉丝：{detail?.fans_count}</div>
          </div>
          <div className={'statistics-item'}>
            <div className="icon iconfont icon-goods"></div>
            <div className="number">商品：{detail?.goods_count}</div>
          </div>
        </div>
      </div>
    </CulturalCardsItemBox>
  </>)
}


// 精选专栏
const FeaturedColumnsBox = styled.div`
    width: 280px;
    height: 588px;
    position: relative;
    perspective: 1000px;
    box-sizing: border-box;

    .front-container,
    .back-container {
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        backface-visibility: hidden;
        cursor: pointer;
    }

    .back-container {
        transform: rotateY(-180deg);
        border-radius: 6px;
        background: linear-gradient(179deg, #fff 45.77%, #fcc89b 221.37%);
        box-shadow: 0 0 6px 0 #00000026;
        transition: transform 0.5s;

        .checkMore {
            position: absolute;
            bottom: 16px;
            left: 50%;
            transform: translateX(-50%);
            width: 88px;
            height: 24px;
            border-radius: 30px;
            border: 1px solid #FFF;
            box-shadow: 0 1px 0 0 #95480c66;
            color: #1c1c1c;
            font-size: 12px;
            font-weight: 400;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .back-cover-box {
            position: relative;

            .back-cover {
                width: 280px;
                height: 186px;
                border-radius: 6px 6px 0 0;
                display: block;

            }

            .views {
                position: absolute;
                width: 280px;
                height: 40px;
                left: 0;
                bottom: 0;
                box-sizing: border-box;
                padding: 18px 0 8px 8px;
                display: flex;
                align-items: center;
                background: linear-gradient(0deg, #000 -20.77%, #66666600 97.67%);
                color: #ffffff;
                font-size: 14px;
                font-weight: 400;
                line-height: 14px;

                img {
                    width: 16px;
                    height: 12px;
                    margin-right: 6px;
                }
            }
        }

        .content-box {
            box-sizing: border-box;
            padding: 14px 20px 16px 20px;

            .title {
                color: #1c1c1c;
                font-size: 16px;
                font-weight: 700;
                line-height: 16px;
                width: fit-content;
            }

            .type-box {
                display: flex;
                align-items: center;
                margin-top: 10px;

                .num {
                    color: #1c1c1c;
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 12px;
                    margin-right: 9px;
                }
            }

            .list {
                margin-top: 20px;

                .item-1 {
                    display: flex;
                    margin-bottom: 6px;
                    align-items: center;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    .left {
                        width: 85px;
                        height: 85px;
                        //flex-shrink: 0;
                        border-radius: 4px;
                        position: relative;

                        .out-cover {
                            width: 100%;
                            height: 100%;
                            border-radius: 4px;
                            filter: blur(1px);
                            display: block;
                        }

                        .in-cover {
                            width: 60px;
                            height: 60px;
                            position: absolute;
                            left: 50%;
                            top: 50%;
                            transform: translate(-50%, -50%);
                            border: 2px solid #d9d9d9;
                            display: block;
                            border-radius: 50%;
                            box-sizing: border-box;
                        }

                        .round {
                            position: absolute;
                            left: 50%;
                            top: 50%;
                            transform: translate(-50%, -50%);
                            width: 80px;
                            height: 80px;
                            display: block;
                        }

                        .yg_small {
                            position: absolute;
                            left: 0px;
                            top: 5px;
                            width: 12px;
                            height: 32px;
                            z-index: 13;
                        }
                    }

                    .right {
                        //max-width: 136px;
                        width: fit-content;
                        color: #1c1c1c;
                        font-size: 14px;
                        font-weight: 700;
                        line-height: 18px;
                        margin-left: 10px;
                        flex: 1;
                    }
                }

                .item-2 {
                    display: flex;
                    align-items: center;
                    margin-bottom: 22px;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    .left {
                        width: 62px;
                        height: 62px;
                        border-radius: 50%;
                        box-sizing: border-box;
                        display: block;
                        padding: 3px;
                        border: 1px dashed #FFB366;
                    }

                    .right {
                        margin-left: 20px;
                        flex: 1;

                        .right-title {
                            //max-width: 166px;
                            width: 100%;
                            color: #1c1c1c;
                            font-size: 14px;
                            font-weight: 700;
                            line-height: normal;
                            letter-spacing: 0.42px;
                        }

                        .right-type {
                            margin-top: 12px;
                            display: flex;

                            .tag-item {
                                margin-right: 10px;

                                &:last-child {
                                    margin-right: 0;
                                }
                            }
                        }
                    }
                }

                .item-3 {
                    display: flex;
                    align-items: center;
                    margin-bottom: 20px;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    .left {
                        width: 105px;
                        height: 70px;
                        flex-shrink: 0;
                        border-radius: 4px;
                    }

                    .right {
                        width: fit-content;
                        color: #1c1c1c;
                        font-size: 14px;
                        font-weight: 700;
                        line-height: 18px;
                        margin-left: 10px;
                    }
                }
            }
        }

    }

    .front-container {
        background: linear-gradient(0deg, #fff 11.75%, #ffd5b3 78.18%);
        box-shadow: 0 0 6px 0 #00000026;
        border-radius: 6px;
        border: 0 solid #fff;
        transition: transform 0.5s;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        padding-top: 42px;
        position: relative;

        .cover {
            width: 82px;
            height: 82px;
            border-radius: 50%;
            margin-top: 42px;
            display: block;
        }

        .slogan {
            display: flex;
            z-index: 10;
            margin-top: 20px;
            // align-items: center;

            .text-1 {
                max-height: 302px;
                color: #1c1c1c;
                font-size: 24px;
                font-weight: 700;
                letter-spacing: 0.5em;
                writing-mode: vertical-rl; /* 或 vertical-lr */
                text-orientation: upright;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                width: 28px;
            }

            .text-2 {
                max-height: 302px;
                color: #1c1c1c;
                font-size: 18px;
                font-weight: 700;
                letter-spacing: 0.3em;
                margin-left: 28px;
                writing-mode: vertical-rl; /* 或 vertical-lr */
                text-orientation: upright;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                width: 22px;
            }
        }

        .bottom-cover {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 185px;
            mask: linear-gradient(0deg, #FFF 30%, transparent);
            border-radius: 0px 0px 6px 6px;
        }
    }

    &:hover .front-container {
        transform: rotateY(180deg);
    }

    &:hover .back-container {
        transform: rotateY(0deg);
    }

`


function ListItem({type, item}) {
  switch (type) {
    case 1:
      return (<div className={'item-1'}>
        <div className={'left'}>
          <img src={item.cover_image} alt="" className={'out-cover'}/>
          <img src={item.cover_image} alt="" className={'in-cover'}/>
          <img src={getImageUrl('specialColumn/round.png')} alt={""} className="round"/>
          <img src={getImageUrl('specialColumn/yg_small.png')} alt={""} className="yg_small"/>
        </div>
        <div className={'right u-line-2 hover-text'}>
          {item.title}
        </div>
      </div>)
    case 2:
      return (<div className={'item-2'}>
        <img src={item?.cover_image} alt="" className={'left'}/>
        <div className={'right'}>
          <div className={'right-title u-line-1 hover-text'}>{item?.title}</div>
          <div className={'right-type'}>
            {
              item.tag_list.map((tag, index) => {
                return (<TypeBox key={index} className={'tag-item u-line-1'}
                                 style={{maxWidth: item.tag_list.length === 1 ? '124px' : '80px'}}>{tag.tag_name}</TypeBox>)
              })
            }
          </div>
        </div>
      </div>)
    case 3:
      return (<div className={'item-3'}>
        <img src={item?.cover_image} alt="" className={'left'}/>
        <div className={'right u-line-2 hover-text'}>
          {item.title}
        </div>
      </div>)
  }
}

export function FeaturedColumns({detail}) {
  function getTypeMap(type, count) {
    switch (type) {
      case 1:
        return `${count}个音频`
      case 2:
        return `${count}个人物`
      case 3:
        return `${count}篇文章`
    }
  }


  return (<>
    <FeaturedColumnsBox>
      <div className="front-container">
        <img src={detail?.press?.logo_url} alt="" className={'cover'}/>
        <div className={'slogan'}>
          <div className={'text-1'}>{detail?.press.press_name}</div>
          <div className={'text-2'}>{detail?.press.slogan}</div>
        </div>
        <img src={detail?.cover_image} alt="" className={'bottom-cover'}/>
      </div>
      <div className="back-container">
        <div className={'back-cover-box'}>
          <img src={detail?.cover_image} alt="" className={'back-cover'}/>
          <div className={'views'}>
            <img src={getImageUrl('eyes.png')} alt=""/>
            {detail?.views}
          </div>
        </div>
        <div className={'content-box'}>
          <div className={'title u-line-1'}>{detail?.column_name}</div>
          <div className={'type-box'}>
            <div className={'num'}>{getTypeMap(detail.column_type, detail?.resource_count)}</div>
            <TypeBox>{detail?.column_type_str}</TypeBox>
          </div>
          <div className={'list'}>
            {detail?.resource_list?.map((item, index) => {
              return <ListItem key={index} type={detail?.column_type} item={item}/>
            })}
          </div>
        </div>
        <div className={'checkMore'}>查看更多</div>
        {/*<p>Back Side</p>*/}
      </div>
    </FeaturedColumnsBox>

  </>)
}

// 文化报刊亭
const CulturalItemBox = styled.div`
    display: flex;
    margin-top: 20px;

    .left {
        position: relative;
        width: 291px;
        height: 390px;

        .cover {
            width: 100%;
            height: 100%;
        }

        .views {
            position: absolute;
            width: 100%;
            height: 40px;
            bottom: 0;
            box-sizing: border-box;
            padding: 18px 0 8px 8px;
            background: linear-gradient(360deg, #000 -10.06%, #66666600 97.48%);
            color: #ffffff;
            font-size: 14px;
            font-weight: 400;
            line-height: 14px;

            img {
                width: 16px;
                height: 12px;
                margin-right: 6px;
            }
        }
    }

    .right {
        margin-left: 40px;

        .nums {
            color: #1c1c1c;
            font-size: 22px;
            font-weight: 700;
        }

        .list {
            display: grid;
            grid-template-columns:repeat(2, 424px);
            gap: 28px 22px;
            margin-top: 32px;

            .item {
                width: 424px;
                height: 118px;
                flex-shrink: 0;
                border-radius: 6px;
                background: #FFF;
                box-sizing: border-box;
                padding: 27px 14px;
                display: flex;

                .item-left {
                    width: 96px;
                    height: 64px;
                    margin-right: 14px;
                    object-fit: cover;
                }

                .item-right {

                    flex: 1;

                    .title {
                        color: #1c1c1c;
                        font-size: 16px;
                        font-weight: 700;
                        line-height: 16px;
                        width: fit-content;
                    }

                    .desc {
                        width: fit-content;
                        color: #666666;
                        font-size: 14px;
                        font-weight: 400;
                        line-height: 18px;
                        margin-top: 13px;
                    }
                }
            }
        }

        .btn-box {
            margin-top: 33px;
            display: flex;

            .btn {
                width: 186px;
                height: 32px;
                border-radius: 2px;
                background: #006647;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #ffffff;
                text-align: center;
                font-size: 14px;
                font-weight: 900;
                line-height: 14px;
                margin-right: 35px;
                cursor: pointer;
            }
        }
    }
`

export function CulturalItem({activeItem}) {
  return (<>
    <CulturalItemBox>
      <div className={'left'}>
        <img src={activeItem?.item?.cover_image} alt="" className={'cover'}/>
        <div className={'views'}>
          <img src={getImageUrl('eyes.png')} alt=""/>
          {activeItem?.views}
        </div>
      </div>
      <div className={'right'}>
        <div className={'nums'}>{activeItem?.item?.volume}</div>
        <div className={'list'}>
          {activeItem?.item?.article_list.map((item, index) => {
            return <div className={'item'} key={index}>
              {item.image && <img src={item.image} alt="" className={'item-left'}/>}
              <div className={'item-right'}>
                <div className={'title u-line-1'}>{item.title}</div>
                <div className={'desc u-line-2'}>{item.summary}</div>
              </div>
            </div>
          })}

        </div>
        <div className={'btn-box'}>
          <div className={'btn'}>购买子刊</div>
          <div className={'btn'}>购买数字刊</div>
        </div>
      </div>
    </CulturalItemBox>
  </>)
}

// 刊社风采

const JournalistStyleBox = styled.div`
    width: 100%;
    position: relative;
    margin-top: 30px;
    cursor: pointer;

    .swiper-container {
        border-radius: 6px;
    }

    .swiper-slide {
        width: 814px;
        height: 300px;
        border-radius: 6px;
        position: relative;

        .play-btn {
            width: 156px;
            height: 38px;
            border-radius: 50px;
            background: #00000066;
            position: absolute;
            bottom: 20px;
            left: 20px;
            color: #ffffff;
            text-align: center;
            font-size: 22px;
            font-weight: 700;
            line-height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 24px;
                height: 24px;
                margin-right: 4px;
            }
        }

        .cover {
            width: 100%;
            height: 100%;
            border-radius: 6px;

        }

        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 814px !important;
            height: 300px;
            background: rgba(255, 255, 255, 0.5);
        }
    }

    .swiper-slide-active {
        &::after {
            display: none;
        }
    }

    .pre-btn {
        width: 44px;
        height: 44px;
        position: absolute;
        left: 213px;
        top: 128px;
        z-index: 9;
    }

    .next-btn {
        width: 44px;
        height: 44px;
        position: absolute;
        right: 213px;
        top: 128px;
        z-index: 9;
    }

    .press-name {
        width: fit-content;
        padding: 0 20px;
        height: 38px;
        border-radius: 50px;
        background: #00000066;
        color: #ffffff;
        font-size: 22px;
        font-weight: 700;
        line-height: 22px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: 20px;
        right: 20px;
    }

`

export function JournalistStyle({list = []}) {
  let swiper = useRef()
  const loop = list.length > 1;
  const [isHover, setIsHover] = useState(false)
  const [activeIndex, setActiveIndex] = useState(0)
  useEffect(() => {
    swiper.current = new Swiper(".swiper-container-2", {
      loop, // 无缝
      slidesPerView: 'auto',
      centeredSlides: true,
      spaceBetween: 20,
      autoplay: {
        delay: 2000, // 时间间隔
        disableOnInteraction: true
      },
      lazy: {
        loadPrevNext: true,
        preloaderClass: "my-lazy-preloader"
      },
      on: {
        click() {
          console.log(swiper.current.realIndex)
        },
        slideChange() {
          setActiveIndex(swiper.current?.realIndex || 0)
        }
      },
      paginationClickable: true,
      // 如果需要前进后退按钮
      // navigation: {
      //   nextEl: '.swiper-button-next',
      //   prevEl: '.swiper-button-prev',
      // },
      // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
      observer: true,
      observeParents: true
      // pagination: {
      //   el: ".swiper-pagination",
      //   clickable: true // 分页器可以点击
      // }
    });
    return () => {
      // 清理Swiper实例
      if (swiper.current) {
        swiper.current?.destroy(true, true);
      }
    };
  }, [list])
  return (<>
    <JournalistStyleBox onMouseEnter={() => {
      swiper.current?.autoplay.stop()
      setIsHover(true)
    }} onMouseLeave={() => {
      swiper.current?.autoplay.start()
      setIsHover(false)
    }}>
      <div className={'swiper-container swiper-container-2'}>
        <div className="swiper-wrapper">
          {list.map((item, index) => {
            return (<div className="swiper-slide" key={index}>
              <img src={item.image_url} alt="" className={'cover'}/>
              {(swiper.current.realIndex === index && (item.banner_type === 3 || item.showcase_type === 3)) &&
                  <div className={'play-btn'}>
                    <img src={getImageUrl('swiper_play.png')} alt="立即播放"/>
                    <div>立即播放</div>
                  </div>}
              {(activeIndex === index && item.extra_data?.press_name) &&
                  <div className={'press-name'}>{item?.extra_data?.press_name}</div>}


            </div>)
          })}
        </div>
        <div className="swiper-pagination"></div>
      </div>
      {isHover && <img src={getImageUrl('activity/button-prev.png')} alt="" className={'pre-btn'} onClick={() => {
        swiper.current?.slidePrev()
      }}/>}
      {isHover && <img src={getImageUrl('activity/button-next.png')} alt="" className={'next-btn'} onClick={() => {
        swiper.current?.slideNext()
      }}/>}

    </JournalistStyleBox>

  </>)
}

// 报刊订阅
import leftBg from '@/assets/imgs/specialColumn/left-bg.png'
import rightBg from '@/assets/imgs/specialColumn/right-bg.png'
import rightBg2 from '@/assets/imgs/specialColumn/right-bg2.png'
import PerBtn from '@/assets/imgs/previous_button.png'
import {$_past_magazine} from '@/api/index.js'
import MEmpty from '@/layout/components/MEmpty/index.jsx'
import {Spin} from 'antd'

const NewspaperSubscriptionsItemBox = styled.div`
    width: 578px;
    height: 294px;
    filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.15));

    &:hover {
        filter: drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.2));
    }

    .inner-box {
        width: 600px;
        height: 296px;
        z-index: 0;
        position: relative;
        border-radius: 10px;
        cursor: pointer;
        overflow: hidden;
        padding-left: 14px;

        .scroll-list {
            position: absolute;
            transition: transform 0.5s;
            transform: translateX(-14px);
            display: flex;

            .first {
                width: 100%;
                height: 100%;
                position: relative;

                .inner {
                    position: relative;
                    width: 578px;
                    height: 294px;
                    border-radius: 10px;
                    background-image: url(${leftBg}); /* 替换为你的图片URL */
                    background-size: cover;
                    box-sizing: border-box;
                    padding: 20px;
                    display: flex;

                    .left-cover {
                        width: 190px;
                        height: 254px;
                        box-shadow: 5px 6px 15px 0 #00000026;
                    }

                    .right {
                        margin-left: 20px;
                        display: flex;
                        flex-direction: column;

                        .title {
                            width: fit-content;
                            color: #1c1c1c;
                            font-size: 18px;
                            font-weight: 700;
                            line-height: 24px;
                        }

                        .desc {
                            width: fit-content;
                            color: #666666;
                            font-size: 14px;
                            font-weight: 400;
                            line-height: 18px;
                            margin-top: 10px;
                            flex: 1;
                            max-height: 36px;
                        }

                        .type-box {
                            display: flex;
                            margin-top: 26px;

                            .item {
                                margin-right: 10px;

                                &:last-child {
                                    margin-right: 0;
                                }
                            }
                        }

                        .press-name {
                            width: fit-content;
                            height: 22px;
                            border-radius: 2px;
                            padding: 0 10px;
                            background: #FFD7AF;
                            color: #7a4f23;
                            font-size: 14px;
                            font-weight: 400;
                            line-height: 22px;
                            margin-top: 14px;
                            box-sizing: border-box;
                        }

                        .price-box {
                            display: flex;
                            align-items: flex-end;
                            margin-top: 28px;

                            .new-price {
                                color: #cd3737;
                                font-size: 20px;
                                font-weight: 700;
                                height: 24px;
                                line-height: 24px;
                                margin-right: 10px;
                            }

                            .old-price {;
                                color: #9e9e9e;
                                font-size: 14px;
                                font-weight: 400;
                                letter-spacing: 0.42px;
                                text-decoration: line-through;
                                height: 18px;
                                line-height: 18px;
                            }
                        }

                        .buy-box {
                            flex: 1;
                            display: flex;
                            align-items: flex-end;

                            .buy-btn {
                                width: 130px;
                                height: 32px;
                                border-radius: 2px;
                                background: #006647;
                                box-sizing: border-box;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                color: #ffffff;
                                font-size: 14px;
                                font-weight: 700;
                                line-height: 14px;
                                margin-right: 30px;

                                &:last-child {
                                    margin-right: 0;
                                }
                            }
                        }
                    }

                }

                .magazine-left {
                    position: absolute;
                    cursor: pointer;
                    width: 60px;
                    height: 60px;
                    right: -22px;
                    top: 50%;
                    transform: translateY(-54%);
                }

            }

            .second {
                width: 100%;
                height: 100%;
                position: relative;
                margin-left: 55px;

                .inner-empty {
                    position: relative;
                    width: 578px;
                    height: 294px;
                    border-radius: 10px;
                    background-image: url(${rightBg2}); /* 替换为你的图片URL */
                    background-size: cover;
                    box-sizing: border-box;
                    //padding: 23px 0 23px 40px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .inner {
                    position: relative;
                    width: 578px;
                    height: 294px;
                    border-radius: 10px;
                    background-image: url(${rightBg}); /* 替换为你的图片URL */
                    background-size: cover;
                    box-sizing: border-box;
                    padding: 23px 0 23px 40px;
                    display: flex;

                    .wq-btn {
                        background-image: url(${PerBtn});
                        width: 144px;
                        height: 65px;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        position: absolute;
                        right: 0;
                        top: 0;

                        .inner-text {
                            position: absolute;
                            right: 15px;
                            top: 8px;
                            color: #ffffff;
                            font-size: 14px;
                            font-weight: 700;
                            line-height: 20px;
                            letter-spacing: 1.68px;
                        }
                    }

                    .left-box {
                        width: 185px;
                        height: 248px;
                        box-shadow: 5px 6px 15px 0 #00000026;
                        position: relative;
                        margin-right: 30px;

                        img {
                            width: 100%;
                            height: 100%;
                        }

                        .instalments {
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            width: 100%;
                            height: 40px;
                            background: linear-gradient(360deg, #000 -10.06%, #66666600 97.48%);
                            color: #fff8f8;
                            font-size: 14px;
                            font-weight: 700;
                            line-height: 40px;
                            text-align: center;
                            box-sizing: border-box;
                            padding: 0 22px;
                        }
                    }

                    .right-box {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;

                        .item {
                            margin-bottom: 35px;

                            &:last-child {
                                margin-bottom: 0;
                            }

                            .volume {
                                color: #1c1c1c;
                                font-size: 20px;
                                font-weight: 700;
                                width: fit-content;
                                max-width: 178px;
                                margin-bottom: 10px;
                            }

                            .active {
                                color: #50b674 !important;
                            }

                            .title {
                                color: #1c1c1c;
                                font-size: 16px;
                                font-weight: 400;
                                line-height: 16px;
                            }
                        }
                    }

                }

                .magazine-right {
                    cursor: pointer;
                    width: 60px;
                    height: 60px;
                    position: absolute;
                    left: -27px;
                    top: 50%;
                    transform: translateY(-54%);
                }

            }
        }
    }

`

export function NewspaperSubscriptionsItem({detail = {}}) {
  const scrollRef = useRef()
  const innerRef = useRef()
  const [pastList, setPastList] = useState([])
  const [activeIndex, setActiveIndex] = useState(0)
  const [loading, setLoading] = useState(false)
  const activeItem = pastList[activeIndex]

  function handleScroll(index) {
    if (index === 1) {
      scrollRef.current.style.transform = "translateX(-633px)"
      innerRef.current.style.transform = "translateX(-14px)"
      checkOutPreviousIssues()
    } else {
      scrollRef.current.style.transform = 'translateX(-14px)'
      innerRef.current.style.transform = 'translateX(0px)'
    }
  }

  async function checkOutPreviousIssues() {
    try {
      setLoading(true)
      const params = {
        image_size: "m",
        resource_id: detail?.resource_id,
        page_num: 1,
        page_limit: 3,
        include_title: 1
      }
      const res = await $_past_magazine(params)
      if (res.result.status_info.status_code !== 100) {
        setPastList([])
        return
      }
      setPastList(res.result.resource_info.past_issues)
    } finally {
      setLoading(false)
    }

  }

  const hasDiscountedPrice = detail?.discounted_price && detail.discounted_price !== '0.00';
  const isPreviousIssues = detail?.resource_id > 0;

  return (<>
    <NewspaperSubscriptionsItemBox>
      <div className={'inner-box'} ref={innerRef}>
        <div className={'scroll-list'} ref={scrollRef}>
          <div className={'first'}>
            <div className={'inner'} style={{background: isPreviousIssues ? '' : '#fff'}}>
              <img src={detail?.cover_image} alt="" className={'left-cover'}/>
              <div className={'right'}>
                <div className={'title u-line-1 hover-text'}
                     style={{maxWidth: isPreviousIssues ? '288px' : '328px'}}>{detail?.product_name}</div>
                <div className={'desc u-line-2'}
                     style={{maxWidth: isPreviousIssues ? '288px' : '328px'}}>{detail?.introduction}</div>
                <div className={'type-box'}>
                  <TypeBox className={'item'}>{detail?.category_name}</TypeBox>
                  <TypeBox className={'item'}>{detail?.cycle_name}</TypeBox>
                </div>
                <div className={'press-name u-line-1'}
                     style={{maxWidth: isPreviousIssues ? '270px' : '318px'}}>{detail?.press?.press_name}</div>
                <div className={'price-box'}>
                  {hasDiscountedPrice && <div className={'new-price'}>￥{detail?.discounted_price}</div>}
                  <div className={`${hasDiscountedPrice ? 'old-price' : 'new-price'}`}>￥{detail?.price}</div>
                </div>
                <div className={'buy-box'}>
                  <div className={'buy-btn'}>购买纸刊</div>
                  <div className={'buy-btn'}>购买数字刊</div>
                </div>
              </div>
            </div>
            {isPreviousIssues &&
                <img src={getImageUrl('magazine_left.png')} alt="" className={'magazine-left'} onClick={() => {
                  handleScroll(1)
                }}/>}

          </div>
          <div className={'second'}>
            {(activeItem && !loading) && <div className={'inner'}>
              <div className={'wq-btn'}>
                <div className={'inner-text'}>查看往期</div>
              </div>
              <div className={'left-box'}>
                <img src={activeItem?.cover_image} alt=""/>
                <div className={'instalments u-line-1'}>{activeItem?.volume}</div>
              </div>
              <div className={'right-box'}>
                {pastList.map((item, index) => <div className={'item'} key={index} onMouseEnter={() => {
                      setActiveIndex(index)
                    }}>
                      <div className={'volume u-line-1' + (index === activeIndex ? ' active' : '')}>{item?.volume}</div>
                      <div className={'title'}>{item?.title}</div>
                    </div>
                )
                }
              </div>

            </div>}
            {((!activeItem) && !loading) && <div className={'inner-empty'}>
              <MEmpty/>
            </div>}
            {loading &&
                <div className={'inner-empty'}>
                  <Spin tip={"拼命加载中"}>
                    <div style={{width: '100px'}}></div>
                  </Spin>
                </div>
            }
            <img src={getImageUrl('magazine_right.png')} alt="" className={'magazine-right'} onClick={() => {
              handleScroll(2)
            }}/>
          </div>
        </div>
      </div>

    </NewspaperSubscriptionsItemBox>
  </>)
}

// 文创周边
const CulturalAndCreativeItemBox = styled.div`
    width: 580px;
    height: 229px;
    border-radius: 6px;
    background: #FFF;
    box-shadow: 0 0 6px 0 #00000026;
    box-sizing: border-box;
    padding: 18px;
    display: flex;
    position: relative;

    .tag-box {
        position: absolute;
        bottom: 10px;
        right: -11px;
    }

    .left-cover {
        width: 253px;
        height: 193px;
        object-fit: contain;
        margin-right: 18px;
    }

    .right-box {
        .title {
            color: #1c1c1c;
            font-size: 18px;
            font-weight: 700;
            line-height: 24px;
            margin-top: 10px;
            width: fit-content;
            max-width: 271px;
            margin-bottom: 19px;
        }

        .press {
            width: fit-content;
            height: 22px;
            padding: 0 10px;
            color: #7a4f23;
            font-size: 14px;
            font-weight: 400;
            line-height: 22px;
            max-width: 273px;
            box-sizing: border-box;
            background: #FFD7AF;
            margin-top: 13px;
        }

        .price {
            display: flex;
            align-items: flex-end;
            margin-top: 22px;

            .new-price {
                margin-right: 10px;
                color: #cd3737;
                font-size: 18px;
                font-weight: 700;
                line-height: 15px;
                letter-spacing: 0.54px;
            }

            .old-price {;
                color: #9e9e9e;
                font-size: 14px;
                font-weight: 400;
                letter-spacing: 0.42px;
                text-decoration: line-through;
                line-height: 10px;
            }
        }
    }
`

export function CulturalAndCreativeItem({detail}) {
  const hasDiscountedPrice = detail?.discounted_price && detail.discounted_price !== '0.00';
  return (<>
    <CulturalAndCreativeItemBox className={'hover-box'}>
      <img src={detail?.cover_image} alt="" className={'left-cover'}/>
      <div className={'right-box'}>
        <div className={'title u-line-1 hover-text'}>{detail?.product_name}</div>
        <TypeBox>{detail?.category_name}</TypeBox>
        <div className={'press u-line-1'}>{detail?.press?.press_name}</div>
        <div className={'price'}>
          {hasDiscountedPrice && <div className={'new-price'}>￥{detail?.discounted_price}</div>}
          <div className={`${hasDiscountedPrice ? 'old-price' : 'new-price'}`}>￥{detail?.price}</div>
        </div>
      </div>
      <div className={'tag-box'}>
        <MTag/>
      </div>
    </CulturalAndCreativeItemBox>
  </>)
}

const MTagBox = styled.div`
    position: relative;
    width: 130px;
    height: 36px;
    background: #C81D1D;
    box-shadow: 0 1px 1.4px 0 #00000026;
    color: #ffffff;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 36px;

    .triangle {
        width: 0;
        height: 0;
        border-left: 11px solid #000000;
        border-top: 16px solid transparent;
        position: absolute;
        top: -16px;
        right: 0px;
    }
`

export function MTag() {
  return (<>
    <MTagBox>
      立享优惠
      <div className={'triangle'}></div>
    </MTagBox>
  </>)
}


// 原创Ip和行业智库通用
const IpDatabaseItemBox = styled.div`
    width: 280px;
    height: 370px;
    background: #FFF;
    box-shadow: 0 0 6px 0 #00000026;
    box-sizing: border-box;
    border-radius: 6px;

    .cover {
        width: 280px;
        height: 186px;
        border-radius: 6px 6px 0 0;
    }

    .infobox {
        box-sizing: border-box;
        padding: 20px;

        .title {
            width: fit-content;
            max-width: 240px;
            color: #1c1c1c;
            font-size: 16px;
            font-weight: 700;
            line-height: 18px;
            letter-spacing: 0.42px;
        }

        .desc {
            width: fit-content;
            max-width: 240px;
            color: #666666;
            font-size: 12px;
            font-weight: 400;
            letter-spacing: 0.36px;
            margin-top: 8px;
            margin-bottom: 18px;
        }

        .press {
            padding: 0 10px;
            max-width: 240px;
            width: fit-content;
            height: 22px;
            border-radius: 2px;
            background: #FFD7AF;
            box-sizing: border-box;
            color: #7a4f23;
            font-size: 14px;
            font-weight: 400;
            line-height: 22px;
            margin-top: 12px;
        }

        .price {
            display: flex;
            align-items: flex-end;
            margin-top: 15px;

            .new-price {
                margin-right: 10px;
                color: #cd3737;
                font-size: 18px;
                font-weight: 700;
                line-height: 15px;
                letter-spacing: 0.54px;
            }

            .old-price {;
                color: #9e9e9e;
                font-size: 14px;
                font-weight: 400;
                letter-spacing: 0.42px;
                text-decoration: line-through;
                line-height: 10px;
            }
        }
    }
`

export function IpDatabaseItem({detail}) {
  const hasDiscountedPrice = detail?.discounted_price && detail.discounted_price !== '0.00';
  return (<>
    <IpDatabaseItemBox className={'hover-box'}>
      <img src={detail?.cover_image} alt="" className={'cover'}/>
      <div className={'infobox'}>
        <div className={'title u-line-1 hover-text'}>{detail?.product_name}</div>
        <div className={'desc u-line-1'}>{detail?.introduction}</div>
        <TypeBox>{detail?.category_name}</TypeBox>
        <div className={'press u-line-1'}>{detail?.press?.press_name}</div>
        <div className={'price'}>
          {hasDiscountedPrice && <div className={'new-price'}>￥{detail?.discounted_price}</div>}
          <div className={`${hasDiscountedPrice ? 'old-price' : 'new-price'}`}>￥{detail?.price}</div>
        </div>
      </div>
    </IpDatabaseItemBox>
  </>)
}


// 主编圆桌

const EditorInChiefRoundtableBox = styled.div`
    display: flex;
    margin-top: 24px;
    justify-content: space-between;

    .left-box {
        margin-top: 67px;

        .title {
            max-width: 600px;
            width: fit-content;
            color: #1c1c1c;
            font-size: 26px;
            font-weight: 700;
            line-height: 38px;
            margin-top: 41px;
            position: relative;
            z-index: 10;

            &::after {
                content: "";
                position: absolute;
                display: block;
                left: 0;
                bottom: 0px;
                width: 100%;
                height: 11px;
                background: linear-gradient(270deg, #ffffff00 0%, #006647 100%);
                z-index: -1;
            }
        }

        .active-box {
            width: 641px;
            height: 464px;
            display: flex;
            justify-content: flex-end;
            position: relative;

            .cover-box {
                width: 464px;
                height: 464px;
                border-radius: 10px;
                position: relative;

                .cover {
                    width: 100%;
                    height: 100%;
                    border-radius: 10px;
                }

                .views {
                    width: 100%;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    height: 40px;
                    box-sizing: border-box;
                    flex-shrink: 0;
                    border-radius: 0 0 10px 10px;
                    display: flex;
                    padding: 14px 10px 12px;
                    justify-content: space-between;
                    align-items: center;
                    background: linear-gradient(360deg, #000 -10.06%, #66666600 97.48%);

                    .left {
                        display: flex;
                        align-items: center;
                        color: #ffffff;
                        font-size: 16px;
                        font-weight: 400;
                        line-height: 14px;

                        img {
                            width: 16px;
                            height: 12px;
                            margin-right: 6px;
                        }
                    }

                    .right {
                        color: #ffffff;
                        font-size: 16px;
                        font-weight: 400;
                    }
                }
            }

            @keyframes rotate {
                0% {
                    transform: rotate(0deg);
                }
                100% {
                    transform: rotate(360deg);
                }
            }

            .record-box {
                width: 464px;
                height: 464px;
                position: relative;
                z-index: 0;

                .record {
                    width: 464px;
                    height: 464px;
                    border-radius: 50%;
                    animation: rotate 10s linear infinite;
                }

                .record2 {
                    position: absolute;
                    //width: 117px;
                    height: 226px;
                    top: 50%;
                    transform: translateY(-50%);
                    right: -15px;
                }

                .cover-mall {
                    left: 50%;
                    top: 50%;
                    position: absolute;
                    width: 260px;
                    height: 260px;
                    border-radius: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }
    }

    .right-box {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 26px;

        .item-active {
            width: 224px;
            height: 322px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .item {
            width: 220px;
            height: 318px;
            flex-shrink: 0;
            background: #fff;
            box-shadow: 0 0 6px 0 #00000026;
            box-sizing: border-box;
            cursor: pointer;
            border-radius: 6px;
            position: relative;

            .cover-box {
                width: 220px;
                height: 220px;
                border-radius: 6px 6px 0 0;
                position: relative;

                .cover {
                    width: 100%;
                    height: 100%;
                    border-radius: 6px 6px 0 0;
                    filter: blur(2px);
                }

                .record {
                    width: 188px;
                    height: 188px;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                }

                .record2 {
                    position: absolute;
                    //width: 32px;
                    height: 100px;
                    top: 13px;
                    left: -7px;
                }

                .cover-mall {
                    width: 142px;
                    height: 142px;
                    box-sizing: border-box;
                    border: 3px solid #d9d9d9;
                    border-radius: 50%;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);

                }

                .views {
                    width: 100%;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    height: 23px;
                    box-sizing: border-box;
                    display: flex;
                    padding: 4px 8px;
                    justify-content: space-between;
                    align-items: center;
                    background: linear-gradient(360deg, #000 -10.06%, #66666600 97.48%);

                    .left {
                        display: flex;
                        align-items: center;
                        color: #ffffff;
                        font-size: 14px;
                        font-weight: 400;
                        line-height: 14px;

                        img {
                            width: 16px;
                            height: 12px;
                            margin-right: 6px;
                        }
                    }

                    .right {
                        color: #ffffff;
                        font-size: 14px;
                        font-weight: 400;
                    }
                }
            }

            .title {
                max-width: 196px;
                color: #1c1c1c;
                font-size: 12px;
                font-weight: 700;
                line-height: 18px;
                height: 36px;
                width: fit-content;
                margin-top: 12px;
                margin-left: 12px;
                display: flex;
                align-items: center;
            }

            .line {
                width: 196px;
                height: 1px;
                background: #B0B0B0;
                margin-top: 12px;
                margin-left: 12px;
            }

            .press {
                max-width: 196px;
                width: fit-content;
                color: #006647;
                margin-top: 12px;
                margin-left: 12px;
                font-size: 12px;
                font-weight: 400;
                line-height: 12px;
            }
        }
    }

`

export function EditorInChiefRoundtable({list = [], activeIndex}) {
  const activeItem = list[activeIndex] || {};
  // console.log(activeItem)
  return (<>
    <EditorInChiefRoundtableBox>
      <div className={'left-box'}>
        <div className={'active-box'}>
          <div style={{position: 'absolute', left: '0', zIndex: '10'}}>
            <div className={'cover-box'}>
              <img src={activeItem?.cover_image} alt="" className={'cover'}/>
              <div className={'views'}>
                <div className={'left'}>
                  <img src={getImageUrl('eyes.png')} alt=""/>
                  {activeItem?.views}
                </div>
                <div className={'right'}>{activeItem?.audio_duration}</div>
              </div>
            </div>
          </div>

          <div className={'record-box'}>
            <img src={getImageUrl('record.png')} alt="" className={'record'}/>
            <img src={getImageUrl('record2.png')} alt="" className={'record2'}/>
            <img src={activeItem?.cover_image} alt="" className={'cover-mall'}/>
          </div>
        </div>
        <div className={'title u-line-1 hover-text'}>{activeItem?.audio_name}</div>
      </div>
      <div className={'right-box'}>
        {list.map((item, index) => {
          return <div key={index} className={'item-active hover-box'}
                      style={{background: index === activeIndex ? 'linear-gradient(0, #3cbd4f, #fff)' : ''}}>
            <div className={`item `}>
              <div className={'cover-box'}>
                <img src={item.cover_image} alt="" className={'cover'}/>
                <img src={getImageUrl('specialColumn/round.png')} alt="" className={'record'}/>
                <img src={getImageUrl('specialColumn/yg.png')} alt="" className={'record2'}/>
                <img src={item?.cover_image} alt="" className={'cover-mall'}/>
                <div className={'views'}>
                  <div className={'left'}>
                    <img src={getImageUrl('eyes.png')} alt=""/>
                    {item?.views}
                  </div>
                  <div className={'right'}>{item?.audio_duration}</div>
                </div>
              </div>
              <div className={'title'}>
                <div className={'u-line-2 hover-text'}>{item.audio_name}</div>
              </div>

              <div className={'line'}></div>
              <div className={'press u-line-1'}>{item.press_name}</div>
            </div>
          </div>

        })}
      </div>
    </EditorInChiefRoundtableBox>

  </>)
}

// 大咖讲坛
const BigCoffeeItemBox = styled.div`
    width: 579px;
    height: 188px;
    //flex-shrink: 0;
    border-radius: 6px;
    background: #FFF;

    .inner-box {
        width: 100%;
        height: 100%;
        border-radius: 6px;
        background: #FFF;
        overflow: hidden;
        position: relative;
        box-sizing: border-box;
        padding: 19px 25px 19px 17px;
        display: flex;

        .left-box {
            width: 150px;
            height: 150px;
            border: 1px dashed #006647;
            box-sizing: border-box;
            padding: 8px;
            border-radius: 50%;
            margin-right: 26px;
        }

        .right-box {
            display: flex;
            flex-direction: column;

            .title-box {
                display: flex;
                margin-top: 27px;
                align-items: center;

                .title {
                    //flex: 1;
                    color: #1c1c1c;
                    font-size: 18px;
                    font-weight: 700;
                    line-height: 22px;

                }

                .type-box {
                    display: flex;
                    margin-left: 10px;

                    .type-item {
                        width: 94px;
                        text-align: center;
                        margin-right: 6px;

                        &:last-child {
                            margin-right: 0;
                        }
                    }
                }
            }

            .desc {
                width: fit-content;
                max-width: 361px;
                color: #666666;
                font-size: 14px;
                font-weight: 400;
                line-height: 22px;
                letter-spacing: 0.42px;
                margin-top: 14px;
            }

            .nums-box {
                flex: 1;
                align-items: flex-end;
                display: flex;

                .nums {
                    width: fit-content;
                    padding: 0 8px;
                    height: 22px;
                    border-radius: 2px;
                    background: #C8DECF;
                    color: #1c1c1c;
                    font-size: 12px;
                    font-weight: 400;
                    line-height: 22px;
                    box-sizing: border-box;
                }

            }
        }

        .round {
            width: 43px;
            height: 106px;
            //flex-shrink: 0;
            border-radius: 50%;
            background: #358451;
            filter: blur(49.81px);
            position: absolute;
            right: 0px;
            top: -60px;
        }

        .label {
            position: absolute;
            right: 0;
            top: 0;
            width: 96px;
            height: 22px;
            border-radius: 0 6px 0 0;
            background: #00000080;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 14px;
            font-weight: 400;
            line-height: 14px;

            img {
                width: 16px;
                height: 12px;
                margin-right: 6px;
            }
        }
    }
`

export function BigCoffeeItem({detail}) {
  return (<>
    <BigCoffeeItemBox className={'hover-box'}>

      <div className={'inner-box'}>
        <div className={'round'}></div>
        <div className={'label'}>
          <img src={getImageUrl('eyes.png')} alt=""/>
          {detail?.views}
        </div>
        <img src={detail?.cover_image} alt="" className={'left-box'}/>
        <div className={'right-box'}>
          <div className={'title-box'}>
            <div className={'title u-line-1 hover-text'}>{detail?.person_name}</div>
            {detail?.tag?.length > 0 && <div className={'type-box'}>
              {detail?.tag.map((item, index) => <TypeBox className={'type-item'} key={index}>{item}</TypeBox>)}
            </div>}

          </div>
          <div className={'desc u-line-2'}>{detail?.introduction}</div>
          <div className={'nums-box'}>
            <div className={'nums'}>文章数量：{detail?.article_count}篇</div>
          </div>

        </div>
      </div>
    </BigCoffeeItemBox>
  </>)
}

//头条
const TiaoItemBox = styled.div`
    width: 280px;
    padding-bottom: 20px;
    box-sizing: border-box;
    border-radius: 6px;
    background: #fff;

    .cover-box {
        width: 280px;
        height: 186px;
        border-radius: 6px 6px 0 0;
        position: relative;

        .cover {
            width: 100%;
            height: 100%;
            border-radius: 6px 6px 0 0;
        }

        .views {
            width: 100%;
            height: 40px;
            background: linear-gradient(360deg, #000 -20.93%, #66666600 97.48%);
            box-sizing: border-box;
            padding: 18px 0px 8px 8px;
            position: absolute;
            bottom: 0;
            left: 0;
            color: #ffffff;
            font-size: 14px;
            font-weight: 400;
            line-height: 14px;

            .eyes {
                width: 16px;
                height: 12px;
                margin-right: 6px;
            }
        }
    }

    .title {
        color: #1c1c1c;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0.48px;
        margin-top: 20px;
        box-sizing: border-box;
        width: 100%;
        padding: 0 18px;
    }

    .desc {
        box-sizing: border-box;
        width: 100%;
        padding: 0 18px;
        color: #666666;
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: 0.42px;
        margin-top: 20px;
    }

    .press-box {
        display: flex;
        box-sizing: border-box;
        width: 100%;
        padding: 0 18px;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;

        .press {
            width: fit-content;
            max-width: 115px;
            height: 22px;
            border-radius: 2px;
            background: #FFD7AF;
            color: #7a4f23;
            font-size: 14px;
            font-weight: 400;
            line-height: 22px;
            box-sizing: border-box;
            padding: 0 10px;
            //margin-right: 8px;
        }

        .time {
            color: #1c1c1c;
            font-size: 12px;
            font-weight: 400;
            letter-spacing: 0.36px;
        }
    }

`

export function TiaoItem({detail}) {
  return (<>
    <TiaoItemBox className={'hover-box'}>
      <div className={'cover-box'}>
        <img src={detail?.cover_image} alt="" className={'cover'}/>
        <div className={'views'}>
          <img src={getImageUrl('eyes.png')} alt="" className={'eyes'}/>
          {detail?.views}
        </div>
      </div>
      <div className={'title hover-text'}>{detail?.title}</div>
      <div className={'desc'}>{detail?.introduction}</div>
      <div className={'press-box'}>
        <div className={'press u-line-1'}>{detail?.press_name}</div>
        <div className={'time'}>{detail?.create_time}</div>
      </div>
    </TiaoItemBox>
  </>)
}